<template>
  <view class="my-page page w-full h-100vh bg-f6f6f6 flex flex-col align-items-center">
    <view class="navBar w-full pl-30 z-9999 sticky t-0"
          :style="{ 'height': `${statusBarHeight + navBarHeight}px`, 'paddingTop': `${statusBarHeight}px` }">
      <view class="text-333 f-36 text-bold flex align-items-center" :style="{ 'height': `${navBarHeight}px` }">我的
      </view>
    </view>
    <view class="page-top-bg w-full z-0"></view>

    <view class="w-full pt-50 pb-30 pl-30 pr-30 flex z-1" v-if="userInfo.id">
      <image :src="userInfo?.avatar ? userInfo?.avatar : `${$oss}/static/my/default-avatar.png`"
             class="w-160 h-160 radius-circle" @click="$toPage('/pages/edit-userInfo/index')"></image>
      <view class="flex flex-col justify-around ml-30">
        <text class="f-44 text-bold text-333">{{ userInfo.nickName ? userInfo.nickName : '默认昵称' }}</text>
        <view v-if="userInfo.vipState == 1" class="flex align-items-center">
          <image :src="`/static/a/vip1.png`" class="w-60 h-60"></image>
          <text class="f-28 text-333 ml-10">有效期至：{{ userInfo.vipEnd }}</text>
          <wd-tag @click="toPayVip" mark plain type="primary" custom-class="space">续费
          </wd-tag>
        </view>
        <view v-else class="flex align-items-center">
          <image :src="`/static/a/vip0.png`" class="w-60 h-60 mr-10"></image>
          <wd-button block size="small" @click="toPayVip">充值VIP
          </wd-button>
        </view>
      </view>
    </view>

    <view class="w-full pt-50 pb-30 pl-30 pr-30 flex z-1" @click="getMyInfo" v-else>
      <image :src="`${$oss}/static/my/default-avatar.png`"
             class="w-160 h-160 radius-circle"></image>
      <view class="flex flex-col justify-around ml-30">
        <text class="f-44 text-bold text-333">请先登录</text>
      </view>
    </view>


    <wd-cell-group custom-class="w-690 radius-36 mt-60 overflow-hidden">
      <wd-cell center clickable :to="item.path" v-for="(item, index) in serviceList" :key="index"
               custom-class="h-120 flex flex-col justify-center" @click="cellClick(item)">
        <template #icon>
          <image :src="`${$oss}/static/my/0${index + 2}.png`" class="w-60 h-60"></image>
        </template>
        <template #title>
          <view class="flex flex-col justify-center h-p-100 f-32 text-333 ml-25">
            <view class="relative" v-if="item.title==='分享给朋友'">
              <wd-button open-type="share" custom-class="shareBtn"></wd-button>
              <text>{{ item.title }}</text>
            </view>

            <text v-else>{{ item.title }}</text>
          </view>
        </template>
      </wd-cell>
    </wd-cell-group>

  </view>
</template>

<script setup>
import {onShow} from '@dcloudio/uni-app'
import {useUserStore} from '@/store/user.js'
import {useMenuBounding} from '@/hooks/useMenuBounding.js'

const {api_get_myInfo, api_post_buyVip} = useRequest()
const {proxy} = getCurrentInstance()

const {statusBarHeight, navBarHeight} = useMenuBounding()
const userStore = useUserStore()
const {userInfo} = storeToRefs(userStore)

const serviceList = ref([
  {title: '我的客户', path: ''},
  {title: '我的名片', path: ''},
  // { title: '密码修改', path: '' },
  {title: '分享给朋友'}
])

const cellClick = (row) => {
  if (row.title === '我的客户') {
    proxy.$toPage('/pages/customer-list/index')
  } else if (row.title === '我的名片') {
    proxy.$toPage('/pages/tabbar/my/card')
  }
}

const getMyInfo = async () => {
  await api_get_myInfo()
}

onLoad(() => {
  getMyInfo()
})

onShareAppMessage(() => {
  return {
    title: 'AI保',
    path: `/pages/tabbar/my/index?scene=${userInfo?.id}`, // 分享路径
    imageUrl: `${proxy.$oss}/static/ai/01.png` // 可选，分享图片
  };
})


// 会员VIP支付，2025年5月17日15:42:31
const toPayVip = () => {
  api_post_buyVip({}).then(res => {
    if (res.code === 0) {
      wxPay(res.data)
    }
  })
}

// 微信支付，2025年5月17日15:39:33
const wxPay = (data) => {
  uni.requestPayment({
    provider: 'wxpay', //支付类型-固定值
    timeStamp: data.timeStamp, // 时间戳（单位：秒）
    nonceStr: data.nonceStr, // 随机字符串
    package: data.packageValue, // 固定值
    signType: data.signType, //固定值
    paySign: data.paySign, //签名
    success: (res) => {
      console.log(res);
      this.$refs.paging.reload(false);
    },
    fail: (err) => {
      console.log(err);
      this.$toPath.showToast('支付失败')
    }
  });
}

</script>

<style lang="scss" scoped>
.page-top-bg {
  position: fixed;
  top: 0;
  height: 662rpx;
  background-color: lightgoldenrodyellow;
}

:deep() {
  .shareBtn {
    position: absolute !important;
    top: 0;
    left: 0;
    opacity: 0 !important;
  }
}

:deep(.space) {
  margin-left: 10rpx;
}
</style>